<script setup>

import roleService from "@/service/impl/RoleService.js"
import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {onMounted} from "vue";
import {log} from "@/util/Log.js";
import RoleModel from "@/model/RoleModel.js"
import {message, t} from "@/service/index.js";


const data = dataJson()
const module = moduleJson()
const role = ref(new RoleModel())
const menus = ref([])
const treeRef = ref(null)

onMounted(() => {
    module.value.init(roleService.url.edit, roleService.url.edit,
        roleService.url.del, null, null)
    module.value.operations.width = "300px"
    init()
})

const init = () => {
    roleService.find(data.value.source()).then(res => {
        let obj = {}
        Object.assign(obj,res)
        obj.data = res.data.page
        menus.value = res.data.menus
        data.value.init(obj)
    }).catch(e => {
        log.info(e)
    })
}

const editOpen = (data, index, type) => {
    let fun = {
        0: () => role.value = new RoleModel(),
        1: () => {
            // 编辑的时候查一遍 toTree
            Object.assign(role.value, data)
            setTimeout(() => {
                data.menuIds.forEach(i => treeRef.value.setChecked(i, true))
            },100)
        }
    }
    fun[type]()
    module.value.dialog.load = false
}

const editConfirm = (type) => {
    let trees = treeRef.value.getCheckedNodes(false,true)
    // if(trees.length <= 0){
    //     message.warning(t("role.noMenu"))
    //     return
    // }
    try {
        const d = Object.assign({}, role.value)
        delete d.rules
        d.menuIds = trees.map(item => item.id)
        roleService.edit(d).then(res => {
            message.success(t("btn.success"))
            data.value.load = true
            init()
            module.value.dialog.show = false
        })
    }catch ( e){
        console.log(e)
    }
}

const del = (d) => {
    roleService.del(d).then(res => {
        message.success(t("btn.success"))
        data.value.load = true
        init()
    })
}


</script>
<template>
    <Page
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @del-confirm="del"
        @refresh="init"
        @pageSizeChange="(size) => data.pageSizeChange(size,init)"
        @pageCurrentChange="(current) =>data.pageCurrentChange(current,init)"
        @onShow="init"
    >
        <!-- 定义表格中的列有哪些 -->
        <template #table-column>
            <el-table-column prop="roleName" :label="$t('role.name')"/>
            <el-table-column prop="enableTag" :label="$t('btn.enabled')">
                <template #default="scope">
                    {{ scope.row.enableTag ? $t('btn.enable') : $t('btn.disable') }}
                </template>
            </el-table-column>
        </template>
        <!-- 当表格中的操作按钮没有你需要的时候可以额外再table-event中扩展 -->
        <template #after-table-event="row">

        </template>
        <!-- 定义详情、添加、编辑弹出层中的字段和数据 -->
        <template #table-dialog>
            <el-form :rules="role.rules" :model="role" :label-width="100" :label-position="'left'" style="width: 100%;padding: 5px">
                <el-form-item :label="$t('role.name')" prop="roleName">
                    <el-input v-model="role.roleName" autocomplete="off" clearable/>
                </el-form-item>
                <el-form-item :label="$t('role.menu')" >
                    <el-tree
                        ref="treeRef"
                        style="width: 100%"
                        :data="menus"
                        show-checkbox
                        node-key="id"
                        :props="{
                            children: 'children',
                            label: 'menuName',
                        }"
                    />
                </el-form-item>
                <el-form-item :label="$t('btn.enabled')" prop="enableTag">
                    <el-switch
                        v-model="role.enableTag"
                        size="small"
                        active-text="启用"
                        inactive-text="停用"
                        :active-value="true"
                        :inactive-value="false"
                    />
                </el-form-item>
            </el-form>
        </template>
        <!-- 搜索 -->
        <template #table-search>

        </template>
    </Page>
</template>

<style lang="scss" scoped>

</style>
